import React from 'react';
import styles from './index.less';

const An = ({
  block = false,
  showTitle = true,
  title = '同比',
  num = 0,
  style = {},
  icons = ['↑', '↓'],
  fontSize = '0.28rem',
  height = '0.42rem',
}) => (
  <div
    style={
      block
        ? { textAlign: 'center', ...style, height, whiteSpace: 'nowrap' }
        : { display: 'inline', ...style, height, whiteSpace: 'nowrap' }
    }
  >
    {showTitle && <span style={{ fontSize, color: '#AAA' }}>{title}</span>}
    {typeof num === 'number' ? (
      <span className={Number(num) > 0 ? styles.up : styles.down} style={{ fontSize }}>
        {`${Number(num) > 0 ? icons[0] : icons[1]}${Math.abs(Number(num))}%`}
      </span>
    ) : (
      <span style={{ fontSize }}>--</span>
    )}
  </div>
);

export default An;
